/**
 * 虚拟列表示例组件
 * 
 * 功能描述：
 * - 展示虚拟列表组件的使用方法
 * - 提供10,000条数据的性能测试示例
 * - 演示如何配置虚拟列表的各项参数
 * 
 * 使用场景：
 * - 开发调试虚拟列表功能
 * - 性能测试和演示
 * - 学习虚拟列表的使用方法
 * 
 * 作者：系统
 * 创建时间：2024
 */

import React, { useState, useCallback } from 'react';
import VirtualList from './VirtualList';

// 示例数据接口
interface ExampleItem {
  id: number;
  title: string;
  content: string;
}

// 生成示例数据
const generateExampleData = (count: number): ExampleItem[] => {
  return Array.from({ length: count }, (_, index) => ({
    id: index + 1,
    title: `项目 ${index + 1}`,
    content: `这是第 ${index + 1} 个项目的内容。`.repeat(Math.floor(Math.random() * 5) + 1)
  }));
};

// 基础虚拟列表示例
export function VirtualListExample() {
  const [data] = useState(() => generateExampleData(10000));
  
  const renderItem = useCallback((item: ExampleItem, index: number) => (
    <div className="p-4 border-b border-gray-200 bg-white hover:bg-gray-50">
      <h3 className="font-semibold text-lg mb-2">{item.title}</h3>
      <p className="text-gray-600">{item.content}</p>
      <div className="text-sm text-gray-400 mt-2">索引: {index}</div>
    </div>
  ), []);
  
  return (
    <div className="p-4">
      <h2 className="text-xl font-bold mb-4">虚拟列表示例 (10,000 项)</h2>
      <VirtualList
        data={data}
        renderItem={renderItem}
        itemHeight={120}
        containerHeight={600}
        overscan={5}
        onReachEnd={() => {
          console.log('到达底部');
        }}
        onScroll={(scrollTop) => {
          console.log('滚动位置:', scrollTop);
        }}
      />
    </div>
  );
}

export default VirtualListExample; 